<template>
	<view>
		<view v-if="getQdListIsSuccess && qdList.length>=1">
			<uni-card v-for="order in qdList">
				<view>
					<text class="running-blue-btn">进行中</text> <text>{{order.serviceTime.substr(0,9)+" "+order.serviceTime.substr(11,5)}}</text>
				</view>
				<view>
					<text>{{order.categoryName}}</text>
					<text class="orderAmount">{{order.orderAmount/100}}元</text>
				</view>
				<view>
					<text>{{order.areaName+order.address}}</text>
				</view>
				<view class="qd-btn-view">
					<button class="blue-btn" @click="openDialog(1)">联系客户</button>
				</view>
			</uni-card>
		</view>
		<view v-else-if="getQdListIsSuccess && qdList.length===0">
			<text>没有取到数据</text>
		</view>
		<view v-else>
			<text>{{getQdListMsg}}</text>
		</view>



		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="'success'" cancelText="取消" confirmText="确定" title="抢单" @confirm="dialogConfirm"
				:content="'服务类型:'+qdOrder.categoryName+'\n 订单金额:'+qdOrder.orderAmount/100+'元'" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		apiUserOrderList
	} from '@/apis/gzt.js'
	export default {
		data() {
			return {
				getQdListIsSuccess: true,
				getQdListMsg: "",
				qdList: [{}],
				qdOrder: {}
			}
		},
		onLoad() {
			//console.log(this.userId)
			let data = {
				"pageNo": 1,
				"pageRow": 20,
				"type":2,
				"userId": this.userId
			}
			//debugger

			apiUserOrderList(data).then(res => {
				//console.log(res)
				if (res.code == 0) {
					this.qdList = res.data.objects
				} else {
					this.getQdListIsSuccess = false
					this.getQdListMsg = res.message
				}

			})

		},
		methods: {
			dialogConfirm() {
				console.log(this.qdOrder.orderNo)
				let data = {
					orderNo: this.qdOrder.orderNo,
					userId: this.userId
				}
				apiUserSnatchOrder(data).then(res => {
					console.log(res)
				})
			},
			dialogClose() {},
			openDialog(type,order) {
				//1,联系客户
				//2，抵达确认
				//3，完成订单
				//debugger
				this.qdOrder = order
				this.$refs.alertDialog.open()
			}
		}
	}
</script>

<style>
	.orderAmount {
		color: #EF6D44;
	}

	.qd-btn-view {
		display: flex;
		flex-direction: row;
		/* background-color: black; */
		justify-content: flex-end;

	}

	.blue-btn {
		background-color: #457EF6;
		height: 58rpx;
		width: 144rpx;
		border-radius: 29rpx;
		color: #FFFFFF;
		font-size: 18rpx;
	}
	.running-blue-btn {
		background-color: #457EF6;
		height: 30rpx;
		width: 76rpx;
		border-radius: 4rpx;
		color: #FFFFFF;
		font-size: 18rpx;
		padding: 4rpx;
		margin-right: 24rpx;
	}
</style>
